<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽奖</title>
    <style>
        body{
            background: url(./images/back.jpg);
            background-size: cover;
        }
        .avatar {
            width: 300px;
            height: 300px;
            border:4px solid #FF0036;
            position:absolute;
            left:0;
            top:0;
            right:0;
            bottom: 0;
            margin: auto;
        }
        .lucky-btn {
            width: 100%;
            border:0;
            outline: 0;
            height: 36px;
            background: #c60a0a;
            border-radius: 4px;
            margin-top: 10px;
            font-size:16px;
            color:#fff;
            cursor: pointer;
            letter-spacing: 5px;
        }
        .name {
            background: transparent;
            color:#fff;
            text-align: center;
            font-weight: 900;
            margin-top: 10px;
            font-size: 22px;
            letter-spacing: 10px;
        }
        
    </style>
</head>
<body>
    <div class="avatar">
        <audio src="images/757068411.mp3" id="myPlayer"></audio>
        <img id="avatarUrl" src="images/0.JPG" alt="用户头像" width="300" height="300">
        <div class="name" id="userName">张三</div>
        <button class="lucky-btn">开始抽奖</button>
    </div>
    <script>
        
            var myPlayer=document.getElementById("myPlayer");
            var avatarUrl=document.getElementById("avatarUrl");
            var luckyBtn=document.getElementsByClassName("lucky-btn")[0];
            var userName=document.getElementById("userName");
            var names=['张三','李四','王五','赵六','田七','周八'];
            var avatars=['0.jpg','1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'];
            var timeHandle=null;
            var isPlay=true;

        luckyBtn.addEventListener("click",function(){
            if(isPlay){
                timeHandle = window.setInterval(start,30);
                this.innerHTML = "停止抽奖";
                isPlay = false;
            }
            else{
                this.innerHTML = "开始抽奖";
                isPlay = true;
                myPlayer.pause();
                window.clearInterval(timeHandle);
            }
        },false);
   

        function start(){
            myPlayer.play();
            var index = Math.floor(Math.random() * names.length);
            var name = names[index];
            var avatar = avatars[index];
            avatarUrl.src = './images/' + avatar;
            userName.innerHTML = name;
        }


        
    </script>
</body>
</html>